<template>
  <div class="homeFlow">
    <div class="homeFlowTitle">
      <el-link type="success" :underline="false" @click="virtualClick">{{$t('接口信息')}}</el-link>
      <el-link type="success" :underline="false" style="margin-left:20px;" @click="flowClick">{{$t('速率详情')}}</el-link>
    </div>
    <div class="homeFlowContent" id="homeFlow">
      <el-table :data="flowList" size='mini' border height="260">
        <el-table-column prop="interface" align='center' :label="$t('接口名称')"></el-table-column>
        <el-table-column align='center' prop="ePortOrlPort" :label="$t('网口类型')" width="90">
          <template slot-scope="scope">
            {{ ePortOrlPortList[scope.row.ePortOrlPort] || scope.row.ePortOrlPort }}
          </template>
        </el-table-column>
        <el-table-column prop="interface-state" align='center' :label="$t('链路状态')" width="90">
          <template slot-scope="scope">
            <div class="interfaceState">
              <i class="el-icon-circle-check" v-if="scope.row['interface-state'] === 'on'" style="color: #009966;font-size:16px;"></i>
              <i class="el-icon-error" v-else style="font-size:16px;"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="rx-rate" align='center' :label="$t('收包速率(KB/s)')" width="120">
          <template slot-scope="scope">
            {{ scope.row['rx-rate'] === 0 ? scope.row['rx-rate'] : scope.row['rx-rate'].toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="tx-rate" align='center' :label="$t('发包速率(KB/s)')" width="120">
          <template slot-scope="scope">
            {{ scope.row['tx-rate'] === 0 ? scope.row['tx-rate'] : scope.row['tx-rate'].toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="realtime-rate" align='center' :label="$t('实时速率(KB/s)')" width="120">
          <template slot-scope="scope">
            {{ scope.row['realtime-rate'] === 0 ? scope.row['realtime-rate'] : scope.row['realtime-rate'].toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Physical ref="virtualDialogRef" v-if="virtualDialogVisible"></Physical>
    <flow-dialog ref="flowDialogRef" v-if="flowDialogVisible"></flow-dialog>
  </div>
</template>

<script>
import { getFlow } from '@/api/home'
import flowDialog from './flow/flowDialog.vue'
import Physical from './flow/Physical.vue'
import { Loading } from 'element-ui'
export default {
  components: { flowDialog, Physical },
  name: 'Flow',
  data () {
    return {
      flowDialogVisible: false,
      virtualDialogVisible: false,
      loadingInstance: null,
      flowList: [],
      ePortOrlPortList: {
        'ePort': this.$t('电口'),
        'lPort': this.$t('光口')
      }
    }
  },
  mounted () {
    this.listData()
    this.timerFlow = setInterval(() => {
      getFlow().then(res => {
        if (res.status === 0) {
          this.flowList = res.info
        }
      }).catch(e => {
        clearInterval(this.timerFlow)
      })
    }, 300000)
  },
  beforeDestroy () {
    if (this.timerFlow) {
      clearInterval(this.timerFlow) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    init () {
      this.listData()
    },
    listData () {
      if (document.getElementById('homeFlow')) {
        this.loadingInstance = Loading.service({
          target: '#homeFlow',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      getFlow().then(res => {
        if (res.status === 0) {
          this.flowList = res.info
          if (this.loadingInstance) {
            this.loadingInstance.close()
            this.loadingInstance = null
          }
        }
      }).catch(e => {
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
        }
      })
    },
    virtualClick (data) {
      this.virtualDialogVisible = true
      this.$nextTick(() => {
        this.$refs.virtualDialogRef.init(data)
      })
    },
    flowClick (data) {
      this.flowDialogVisible = true
      this.$nextTick(() => {
        this.$refs.flowDialogRef.init(data)
      })
    }
  }
}
</script>
<style lang="less">
// .homeFlow {

// }
.homeFlowTitle {
  border-bottom: 1px solid #dcdfe6;
  padding: 10px 20px;
}

.homeFlowContent {
  width: 100%;
  padding: 5px 10px;
}

.interfaceState {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
